<script setup lang="ts">
import { PlayOne, GoEnd, Pause } from '@icon-park/vue-next'
import { ref, computed, onUnmounted } from 'vue'
import { useConfigStore } from '@renderer/stores/useConfigStore'

const { config, getPhaseSeconds } = useConfigStore()

// 工作阶段类型
type Phase = 'work' | 'shortBreak' | 'longBreak'
// 计时器状态
const timer = ref(config.workTimer * 60)
// 是否运行
const isRunning = ref(false)
// 当前工作阶段
const currentPhase = ref<Phase>('work')
// 当前工作周期
const currentCycle = ref(1)
// 总工作周期
const totalCycles = 4


// 计算显示时钟文本
const formatSeconds = computed(() => {
  const date = new Date(0)
  date.setSeconds(timer.value)
  return date.toISOString().substring(14, 19)
})

// 计算显示时间文案
const currentPhaseName = computed(() => {
  switch (currentPhase.value) {
    case 'work':
      return isRunning.value ? '工作' : (timer.value < getPhaseSeconds(currentPhase.value) ? '暂停' : '下一时段: 工作')
    case 'shortBreak':
      return isRunning.value ? '休息' : (timer.value < getPhaseSeconds(currentPhase.value) ? '暂停' : '下一时段: 短休息')
    case 'longBreak':
      return isRunning.value ? '休息' : (timer.value < getPhaseSeconds(currentPhase.value) ? '暂停' : '下一时段: 长休息')
    default: return ''
  }
})

// 计算进度百分比
const progressPercentage = computed(() => {
  const totalTime = getPhaseSeconds(currentPhase.value)
  const percentage = ((totalTime - timer.value) / totalTime) * 100
  return percentage
})

// 开始/暂停
const toggleTimer = () => {

  if (isRunning.value == true) {
    pauseTimerEvent()
  } else {
    startTimerEvent()
  }
}

// 开始计时器
const startTimerEvent = () => {
  isRunning.value = true

  window.api.starttimer(timer.value)
}

// 暂停计时器
const pauseTimerEvent = () => {
  isRunning.value = false
  window.api.stoptimer()
}

// 跳过当前阶段事件
const skipPhaseEnvent = () => {
  completePhaseEvent(true)
}

// 完成阶段工作事件
const completePhaseEvent = (skip = false) => {

  pauseTimerEvent()
  if (currentPhase.value == 'work') {
    // 计算长休息还是短休息
    currentPhase.value = currentCycle.value === totalCycles ? 'longBreak' : 'shortBreak'
    // 发送通知
    if (skip == false) window.api.sendNotified('工作结束', '当前阶段已完成，请开始休息吧！')
  } else {
    // 休息结束，进入工作模式
    currentPhase.value = 'work'
    // 计算时间周期
    currentCycle.value = currentCycle.value === totalCycles ? 1 : ++currentCycle.value
    // 发送通知
    if (skip == false) window.api.sendNotified('休息结束', '当前阶段已完成，请开始工作吧！')
  }
  // 重置状态时间
  initializePhase(currentPhase.value)
}

// 重置阶段
const resetPhase = () => {
  pauseTimerEvent()

  currentCycle.value = 1
  currentPhase.value = 'work'
  initializePhase(currentPhase.value)
}

// 监听主进程倒计时
window.api.onUpdateTimer((value) => {
  timer.value = value
  if (timer.value <= 0) {
    completePhaseEvent()
    return
  }
})

// 初始化阶段时间
const initializePhase = (phase: Phase) => {
  timer.value = getPhaseSeconds(phase)
}

// 初始化阶段流程
initializePhase(currentPhase.value)

onUnmounted(() => {
  pauseTimerEvent()
})
</script>

<template>
  <!-- 时钟展示区 -->
  <div class="flex justify-center items-center p-10">
    <el-progress type="circle" :percentage="progressPercentage" :stroke-width="10" :width="200" color="#3b82f6"
      stroke-linecap="round">
      <template #default="">
        <div class="text-4xl text-blue-500 font-bold mb-2">{{ formatSeconds }}</div>
        <div class="text-base text-gray-400">{{ currentPhaseName }}</div>
      </template>
    </el-progress>
  </div>
  <div>
    <!-- 阶段展示区 -->
    <div class="flex justify-around w-20 m-auto mb-8">
      <div class="w-4 h-4 rounded-full  border-2 border-blue-400" v-for="dot in totalCycles" :key="dot"
        :class="{ 'bg-blue-400': currentCycle > dot, 'bg-blue-300': currentCycle == dot }"></div>
    </div>
    <!-- 按钮操作区 -->
    <div class="flex justify-center">
      <el-button type="primary" round @click="toggleTimer">
        <play-one theme="outline" size="24" fill="#fff" v-if="!isRunning" />
        <pause theme="outline" size="24" fill="#fff" v-if="isRunning" />
        <span>{{ isRunning ? '暂停' : '开始' }}</span>
      </el-button>
      <el-button type="primary" round @click="skipPhaseEnvent">
        <go-end theme="outline" size="24" fill="#fff" />
        <span>跳过</span>
      </el-button>
    </div>

    <!-- 工作阶段 -->
    <div class="hidden">
      <div class="flex justify-around mt-4">
        <div>{{ currentCycle }} </div>
        <div>{{ currentPhase }}</div>
        <el-button @click="resetPhase">重置阶段</el-button>
      </div>
    </div>

  </div>
</template>